@use '../../app/styles/mixins' as *;
.avatar {
	max-width: 347px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--radius);
	border: var(--border);
}

.levels {
	@include font(var(--ff-first), 24px, 500);
	width: 100%;
	max-width: 714px;

	display: flex;
	flex-direction: column;
	gap: 16px;

	border-radius: var(--radius);
	border: var(--border);

	background: var(--bg-card);
	padding: 30px 30px 0 30px;

	&_text {
		@include font(var(--ff-second), 22px, 400);
		margin-left: 10px;
	}
}
.level {
}

.place {
}
.student {
}

.panel {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

.name {
	@include font(var(--ff-first), 20px, 500);
	border: var(--border);
	background: var(--bg-card);
	width: 345px;
	height: 57px;
	padding: 6px 10px 5px 10px;
	text-align: center;
	border-radius: var(--radius);
}

.exercises {
	width: 714px;
	height: 365px;
	border-radius: var(--radius);
	border: var(--border);
	background: var(--bg-card);
	overflow: hidden;

	&_header {
		@include font(var(--ff-first), 24px, 500);
		height: 54px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #a1cbf1;
		border: var(--border);
		border-radius: var(--radius);
		margin-bottom: 7px;
	}
	&_item {
		width: 714px;
		height: 87px;
		border-radius: var(--radius);
		background: var(--bg-card);
		border: var(--border);
		margin-bottom: 7px;
	}
}
